doctype html
// thanks to the play! framework (http://www.playframework.org/)
html
  head
    title= exception
    style.
      html, body, pre {
        margin: 0;
        padding: 0;
        font-family: Monaco, 'Lucida Console';
        background: #ECECEC;
      }
      h1 {
        margin: 0;
        background: #A31012;
        padding: 20px 45px;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
        border-bottom: 1px solid #690000;
        font-size: 28px;
      }
      p#detail {
        margin: 0;
        padding: 15px 45px;
        background: #F5A0A0;
        border-top: 4px solid #D36D6D;
        color: #730000;
        text-shadow: 1px 1px 1px rgba(255,255,255,.3);
        font-size: 14px;
        border-bottom: 1px solid #BA7A7A;
      }
      p#detail input {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AE1113), to(#A31012));
        border: 1px solid #790000;
        padding: 3px 10px;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
        color: white;
        border-radius: 3px;
        cursor: pointer;
        font-family: Monaco, 'Lucida Console';
        font-size: 12px;
        margin: 0 10px;
        display: inline-block;
        position: relative;
        top: -1px;
      }
      h2 {
        margin: 0;
        padding: 5px 45px;
        font-size: 12px;
        background: #333;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
        border-top: 4px solid #2a2a2a;
      }
      h3 {
        margin: 0;
        padding: 20px 45px 10px;
        font-size: 16px;
        color: #333;
        text-shadow: 1px 1px 1px rgba(255,255,255,.5);
      }
      h3 a {
        font-size: 12px;
        font-weight: normal;
        cursor: pointer;
      }
      pre {
        margin: 0;
        border-bottom: 1px solid #DDD;
        text-shadow: 1px 1px 1px rgba(255,255,255,.5);
        position: relative;
        font-size: 12px;
        overflow: hidden;
      }
      pre span.line {
        text-align: right;
        display: inline-block;
        padding: 5px 5px;
        width: 30px;
        background: #D6D6D6;
        color: #8B8B8B;
        text-shadow: 1px 1px 1px rgba(255,255,255,.5);
        font-weight: bold;
      }
      pre span.code {
        padding: 5px 5px;
        position: absolute;
        right: 0;
        left: 40px;
      }
      pre:first-child span.code {
        border-top: 4px solid #CDCDCD;
      }
      pre:first-child span.line {
        border-top: 4px solid #B6B6B6;
      }
      pre:last-child span.code {
        border-bottom: 4px solid #CDCDCD;
      }
      pre:last-child span.line {
        border-bottom: 4px solid #B6B6B6;
      }
      pre.error span.line {
        background: #A31012;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
      }
      pre.error {
        color: #A31012;
      }
      pre.error span.marker {
        background: #A31012;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
      }
      #rawHtml, #prettyHtml {
        padding: 5px 45px;
        width: 100%;
        overflow: auto;
        padding-bottom: 10px;
      }
    if html
      script.
        function style_html(a,b){function i(){return this.pos=0,this.token="",this.current_mode="CONTENT",this.tags={parent:"parent1",parentcount:1,parent1:""},this.tag_type="",this.token_text=this.last_token=this.last_text=this.token_type="",this.Utils={whitespace:"\n\r	 ".split(""),single_token:"br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed,?php,?,?=".split(","),extra_liners:"head,body,/html".split(","),in_array:function(a,b){for(var c=0;b.length>c;c++)if(a===b[c])return!0;return!1}},this.get_content=function(){var a="",b=[],c=!1;while(this.input.charAt(this.pos)!=="<"){if(this.pos>=this.input.length)return b.length?b.join(""):["","TK_EOF"];if(a=this.input.charAt(this.pos),this.pos++,this.line_char_count++,this.Utils.in_array(a,this.Utils.whitespace))b.length&&(c=!0),this.line_char_count--;else{if(c){if(this.line_char_count>=this.max_char){b.push("\n");for(var d=0;this.indent_level>d;d++)b.push(this.indent_string);this.line_char_count=0}else b.push(" "),this.line_char_count++;c=!1}b.push(a)}}return b.length?b.join(""):""},this.get_contents_to=function(a){if(this.pos==this.input.length)return["","TK_EOF"];var c="",d=RegExp("</"+a+"\\s*>","igm");d.lastIndex=this.pos;var e=d.exec(this.input),f=e?e.index:this.input.length;return f>this.pos&&(c=this.input.substring(this.pos,f),this.pos=f),c},this.record_tag=function(a){this.tags[a+"count"]?(this.tags[a+"count"]++,this.tags[a+this.tags[a+"count"]]=this.indent_level):(this.tags[a+"count"]=1,this.tags[a+this.tags[a+"count"]]=this.indent_level),this.tags[a+this.tags[a+"count"]+"parent"]=this.tags.parent,this.tags.parent=a+this.tags[a+"count"]},this.retrieve_tag=function(a){if(this.tags[a+"count"]){var b=this.tags.parent;while(b){if(a+this.tags[a+"count"]===b)break;b=this.tags[b+"parent"]}b&&(this.indent_level=this.tags[a+this.tags[a+"count"]],this.tags.parent=this.tags[b+"parent"]),delete this.tags[a+this.tags[a+"count"]+"parent"],delete this.tags[a+this.tags[a+"count"]],this.tags[a+"count"]==1?delete this.tags[a+"count"]:this.tags[a+"count"]--}},this.get_tag=function(){var d,e,a="",b=[],c=!1;do{if(this.pos>=this.input.length)return b.length?b.join(""):["","TK_EOF"];a=this.input.charAt(this.pos),this.pos++,this.line_char_count++,this.Utils.in_array(a,this.Utils.whitespace)?(c=!0,this.line_char_count--):((a==="'"||a==='"')&&(b[1]&&b[1]==="!"||(a+=this.get_unformatted(a),c=!0)),a==="="&&(c=!1),b.length&&b[b.length-1]!=="="&&a!==">"&&c&&(this.line_char_count>=this.max_char?(this.print_newline(!1,b),this.line_char_count=0):(b.push(" "),this.line_char_count++),c=!1),a==="<"&&(d=this.pos-1),b.push(a))}while(a!==">");var g,f=b.join("");g=f.indexOf(" ")!=-1?f.indexOf(" "):f.indexOf(">");var i=f.substring(1,g).toLowerCase();if(f.charAt(f.length-2)==="/"||this.Utils.in_array(i,this.Utils.single_token))this.tag_type="SINGLE";else if(i==="script")this.record_tag(i),this.tag_type="SCRIPT";else if(i==="style")this.record_tag(i),this.tag_type="STYLE";else if(this.Utils.in_array(i,h)){var j=this.get_unformatted("</"+i+">",f);b.push(j),d>0&&this.Utils.in_array(this.input.charAt(d-1),this.Utils.whitespace)&&b.splice(0,0,this.input.charAt(d-1)),e=this.pos-1,this.Utils.in_array(this.input.charAt(e+1),this.Utils.whitespace)&&b.push(this.input.charAt(e+1)),this.tag_type="SINGLE"}else if(i.charAt(0)==="!")if(i.indexOf("[if")!=-1){if(f.indexOf("!IE")!=-1){var j=this.get_unformatted("-->",f);b.push(j)}this.tag_type="START"}else if(i.indexOf("[endif")!=-1)this.tag_type="END",this.unindent();else if(i.indexOf("[cdata[")!=-1){var j=this.get_unformatted("]]>",f);b.push(j),this.tag_type="SINGLE"}else{var j=this.get_unformatted("-->",f);b.push(j),this.tag_type="SINGLE"}else i.charAt(0)==="/"?(this.retrieve_tag(i.substring(1)),this.tag_type="END"):(this.record_tag(i),this.tag_type="START"),this.Utils.in_array(i,this.Utils.extra_liners)&&this.print_newline(!0,this.output);return b.join("")},this.get_unformatted=function(a,b){if(b&&b.indexOf(a)!=-1)return"";var c="",d="",e=!0;do{if(this.pos>=this.input.length)return d;if(c=this.input.charAt(this.pos),this.pos++,this.Utils.in_array(c,this.Utils.whitespace)){if(!e){this.line_char_count--;continue}if(c==="\n"||c==="\r"){d+="\n",this.line_char_count=0;continue}}d+=c,this.line_char_count++,e=!0}while(d.indexOf(a)==-1);return d},this.get_token=function(){var a;if(this.last_token==="TK_TAG_SCRIPT"||this.last_token==="TK_TAG_STYLE"){var b=this.last_token.substr(7);return a=this.get_contents_to(b),typeof a!="string"?a:[a,"TK_"+b]}if(this.current_mode==="CONTENT")return a=this.get_content(),typeof a!="string"?a:[a,"TK_CONTENT"];if(this.current_mode==="TAG"){if(a=this.get_tag(),typeof a!="string")return a;var c="TK_TAG_"+this.tag_type;return[a,c]}},this.get_full_indent=function(a){return a=this.indent_level+a||0,1>a?"":Array(a+1).join(this.indent_string)},this.printer=function(a,b,c,d,e){this.input=a||"",this.output=[],this.indent_character=b,this.indent_string="",this.indent_size=c,this.brace_style=e,this.indent_level=0,this.max_char=d,this.line_char_count=0;for(var f=0;this.indent_size>f;f++)this.indent_string+=this.indent_character;this.print_newline=function(a,b){if(this.line_char_count=0,b&&b.length){if(!a)while(this.Utils.in_array(b[b.length-1],this.Utils.whitespace))b.pop();b.push("\n");for(var c=0;this.indent_level>c;c++)b.push(this.indent_string)}},this.print_token=function(a){this.output.push(a)},this.indent=function(){this.indent_level++},this.unindent=function(){this.indent_level>0&&this.indent_level--}},this}var c,d,e,f,g,h;for(b=b||{},d=b.indent_size||4,e=b.indent_char||" ",g=b.brace_style||"collapse",f=b.max_char==0?1/0:b.max_char||70,h=b.unformatted||["a","span","bdo","em","strong","dfn","code","samp","kbd","var","cite","abbr","acronym","q","sub","sup","tt","i","b","big","small","u","s","strike","font","ins","del","pre","address","dt","h1","h2","h3","h4","h5","h6"],c=new i,c.printer(a,e,d,f,g);;){var j=c.get_token();if(c.token_text=j[0],c.token_type=j[1],c.token_type==="TK_EOF")break;switch(c.token_type){case"TK_TAG_START":c.print_newline(!1,c.output),c.print_token(c.token_text),c.indent(),c.current_mode="CONTENT";break;case"TK_TAG_STYLE":case"TK_TAG_SCRIPT":c.print_newline(!1,c.output),c.print_token(c.token_text),c.current_mode="CONTENT";break;case"TK_TAG_END":if(c.last_token==="TK_CONTENT"&&c.last_text===""){var k=c.token_text.match(/\w+/)[0],l=c.output[c.output.length-1].match(/<\s*(\w+)/);(l===null||l[1]!==k)&&c.print_newline(!0,c.output)}c.print_token(c.token_text),c.current_mode="CONTENT";break;case"TK_TAG_SINGLE":var m=c.token_text.match(/^\s*<([a-z]+)/i);m&&c.Utils.in_array(m[1],h)||c.print_newline(!1,c.output),c.print_token(c.token_text),c.current_mode="CONTENT";break;case"TK_CONTENT":c.token_text!==""&&c.print_token(c.token_text),c.current_mode="TAG";break;case"TK_STYLE":case"TK_SCRIPT":if(c.token_text!==""){c.output.push("\n");var n=c.token_text;if(c.token_type=="TK_SCRIPT")var o=typeof js_beautify=="function"&&js_beautify;else if(c.token_type=="TK_STYLE")var o=typeof css_beautify=="function"&&css_beautify;if(b.indent_scripts=="keep")var p=0;else if(b.indent_scripts=="separate")var p=-c.indent_level;else var p=1;var q=c.get_full_indent(p);if(o)n=o(n.replace(/^\s*/,q),b);else{var r=n.match(/^\s*/)[0],s=r.match(/[^\n\r]*$/)[0].split(c.indent_string).length-1,t=c.get_full_indent(p-s);n=n.replace(/^\s*/,q).replace(/\r\n|\r|\n/g,"\n"+t).replace(/\s*$/,"")}n&&(c.print_token(n),c.print_newline(!0,c.output))}c.current_mode="TAG"}c.last_token=c.token_type,c.last_text=c.token_text}return c.output.join("")}
  body
    h1= exception
    p#detail= message
    h2 In #{filename} at line #{linenumber}.
    div
      if lines
        for line, i in lines
          if i > linenumber - 6 && i < linenumber + 3
            pre(class=(i+1 == linenumber ? "error" : false)) <span class="line">#{i+1}</span><span class="code">#{line}</span>
    if html
      h3
        | Generated Output 
        a.openPretty pretty
        |  
        a.openRaw raw
      pre#rawHtml= html
      pre#prettyHtml
      script.
        var $raw = document.getElementById('rawHtml');
        var $pretty = document.getElementById('prettyHtml');
        var $rawLink = document.getElementsByClassName('openRaw')[0];
        var $prettyLink = document.getElementsByClassName('openPretty')[0];

        $pretty.textContent = style_html($raw.textContent);

        if (window.localStorage && localStorage.pugExceptionOutput == 'raw') {
          $pretty.style.display = 'none';
          $rawLink.style.textDecoration = 'underline';
        } else {
          $raw.style.display = 'none';
          $prettyLink.style.textDecoration = 'underline';
        }

        $prettyLink.addEventListener('click', function() {
          $raw.style.display = 'none';
          $pretty.style.display = 'block';
          $rawLink.style.textDecoration = 'none';
          $prettyLink.style.textDecoration = 'underline';
          localStorage.pugExceptionOutput = 'pretty';
        });

        $rawLink.addEventListener('click', function() {
          $raw.style.display = 'block';
          $pretty.style.display = 'none';
          $rawLink.style.textDecoration = 'underline';
          $prettyLink.style.textDecoration = 'none';
          localStorage.pugExceptionOutput = 'raw';
        });